<style>
    .sortable-chosen {
        background-color: #577CB4;
    }

    .seldatasource {
        cursor: pointer;
    }

    .layui-tab-bar {
        display: none;
    }
</style>
<?php
$regex_arr = common_regex();
?>
<div class="rc-pagepadding">
    <form class="layui-form">
        <div class=" rc-pannel ">
            <div class="rc-pannel-header ">
                <div class="rc-flex  toolbar rc-flex-justify-between">
                    <div class=" rc-flex rc-flex-vertical-center ">

                    </div>
                    <div>

                        <a href="javascript:;" title="添加字段" id="add"> <i class="iconfont" style="font-size: 24px;">&#xe631;</i></a>
                        <a href="javascript:;" style="margin-left:10px" title="保存" lay-submit lay-filter="save"><i class="iconfont" style="font-size: 24px;"> &#xe649;</i></a>

                    </div>
                </div>
            </div>
            <div class="rc-pannel-body rc-pagepadding">

                <table class="layui-table" id="sort">
                    <colgroup>
                        <col style="width: 100px;">
                        <col style="width: 100px;">
                        <col>
                        <col style="width: 120px;">
                        <col style="width: 60px;">
                        <col>
                        <col>
                        <col>
                        <col>
                        <col>
                        <col>
                        <col>
                        <col>
                    </colgroup>
                    <thead>
                        <tr>
                            <th>字段名</th>
                            <th>字段</th>
                            <th>字段类型</th>
                            <th>元素控件</th>
                            <th>投稿</th>
                            <th>富文本?</th>
                            <th>必填?</th>
                            <th>验证</th>
                            <th style="width: 100px;">搜索</th>
                            <th style="width: 100px;">分组</th>
                            <th style="width: 80px;">默认值</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <input type="hidden" value="<?php echo count($fields) ?>" id="maxidx" />
                        <?php
                        foreach ($fields as $key => $field) {
                        ?>
                            <tr>
                                <td><input type="text" class="layui-input" style="width: 60px;" name="field[<?php echo $key ?>][title]" value="<?php echo $field['title'] ?>" lay-verify="required" /></td>
                                <td><input type="text" class="layui-input" style="width: 60px;" name="field[<?php echo $key ?>][name]" value="<?php echo $field['name'] ?>" /></td>
                                <td>
                                    <div class="layui-input-inline" style="width: 100px;">
                                        <select name="field[<?php echo $key ?>][type]">
                                            <option <?php echo $field['type'] == 'string' ? 'selected' : '' ?> value="string">字符串</option>
                                            <option <?php echo $field['type'] == 'text' ? 'selected' : '' ?> value="text">文本</option>
                                            <option <?php echo $field['type'] == 'integer' ? 'selected' : '' ?> value="integer">整数</option>
                                            <option <?php echo $field['type'] == 'decimal' ? 'selected' : '' ?> value="decimal">小数</option>
                                            <option <?php echo $field['type'] == 'datetime' ? 'selected' : '' ?> value="datetime">时间</option>
                                        </select>
                                    </div>
                                </td>
                                <td>
                                    <div class=" rc-flex rc-flex-vertical-center ">
                                        <a class="selectelement primary" allowelement="<?php echo $field['allowelement']; ?>">
                                            <?php echo $elements[$field['element']]['title']; ?>

                                            <?php
                                            if ($field['polymorphic'] && $elements[$field['element']]['polymorphic']) {
                                                $polymorphics =  json_decode($elements[$field['element']]['polymorphic'], true);
                                                echo isset($polymorphics[$field['polymorphic']]) ? ' / ' . $polymorphics[$field['polymorphic']] : '';
                                            } ?>


                                            <?php

                                            if ($field['sourcetype'] == 1) {
                                                isset($dicts[$field['sourceval']]) ? $dicts[$field['sourceval']]['title'] : '';
                                            }

                                            if ($field['sourcetype'] == 2) {
                                                $sourceval = explode('|', $field['sourceval']);
                                                echo '表：' . $sourceval[0] . '|实际字段：' . $sourceval[1] . '|显示字段：' . $sourceval[2];
                                            }
                                            ?>
                                        </a>
                                        <input type="hidden" name="field[<?php echo $key ?>][element]" class="element" value="<?php echo $field['element'] ?>" />
                                        <input type="hidden" name="field[<?php echo $key ?>][sourceval]" class="sourceval" value="<?php echo $field['sourceval'] ?>" />
                                        <input type="hidden" name="field[<?php echo $key ?>][polymorphic]" class="polymorphic" value="<?php echo $field['polymorphic'] ?>" />

                                    </div>

                                </td>
                                <td><input type="checkbox" name="field[<?php echo $key ?>][contribute]" value="1" <?php echo $field['contribute'] == 1 ? 'checked' : '' ?> /></td>
                                <td><input type="checkbox" name="field[<?php echo $key ?>][editor]" value="1" <?php echo $field['editor'] == 1 ? 'checked' : '' ?> /></td>
                                <td><input type="checkbox" name="field[<?php echo $key ?>][require]" value="1" <?php echo $field['require'] == 1 ? 'checked' : '' ?> /></td>

                                <td>
                                    <a class="selectregex primary">
                                        <?php
                                        if (trim($field['reg']) != '') {
                                            echo isset($regex_arr[$field['reg']]) ? $regex_arr[$field['reg']] : '自定义验证';
                                        } else {
                                            echo '不验证';
                                        }
                                        ?>
                                    </a>

                                    <input type="hidden" class="regname" value="" />
                                    <input type="hidden" name="field[<?php echo $key ?>][reg]" class="regvalue" value="<?php echo $field['reg'] ?>" />
                                </td>

                                <td>

                                    <select name="field[<?php echo $key ?>][search]">
                                        <option value="0" <?php echo $field['search'] == 0 ? 'selected' : '' ?>>不搜索</option>
                                        <option value="1" <?php echo $field['search'] == 1 ? 'selected' : '' ?>>完全匹配</option>
                                        <option value="2" <?php echo $field['search'] == 2 ? 'selected' : '' ?>>模糊匹配</option>
                                        <option value="3" <?php echo $field['search'] == 3 ? 'selected' : '' ?>>json搜索</option>
                                       
                                    </select>
                                </td>

                                <td>
                                    <select name="field[<?php echo $key ?>][group]">
                                        <option value="1" <?php echo $field['group'] == 1 ? 'selected' : '' ?>>主操作区</option>
                                        <option value="2" <?php echo $field['group'] == 2 ? 'selected' : '' ?>>副操作区</option>
                                    </select>
                                </td>
                                <td><input type="text" class="layui-input" name="field[<?php echo $key ?>][default]" value="<?php echo $field['default'] ?>" /></td>

                                <td>
                                    <input type="hidden" value="<?php echo $field['id'] ?>" name="field[<?php echo $key ?>][id]" />
                                    <input type="hidden" value="edit" class="optype" name="field[<?php echo $key ?>][op]" />
                                    <a href="javascript:;" title="拖拽排序" class="drap" style="margin-right: 20px;cursor:move"> <i class="iconfont" style="font-size: 18px;">&#xe638;</i></a>

                                    <?php
                                    if ($field['issystem'] != 1) {
                                    ?>
                                        <a href="javascript:;" title="删除" class="delete"> <i class="iconfont" style="font-size: 18px;color:#970c0c">&#xe786;</i></a>
                                    <?php
                                    }
                                    ?>

                                </td>
                            </tr>
                        <?php
                        }


                        ?>

                    </tbody>
                </table>

            </div>

        </div>


    </form>
</div>

<div id="selelementbox" style="position: absolute; display:none">
    <div class="rc-pannel rc-pagepadding layui-form" style="border:1px solid var(--primary-color);box-shadow:2px 2px 5px var(--primary-color);width:480px">

        <div class="rc-pannel-body">
            <?php echo element('elementchoose', name: 'elementchoose') ?>

        </div>

        <div class="rc-pannel-footer">
            <div style="text-align: center; padding-top:15px">
                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" id="chooseelement">确定</button>
                <button type="button" id="closeelementchoose" class="layui-btn layui-btn-sm">关闭</button>
            </div>
        </div>
    </div>
</div>



<div id="selregexbox" style="position: absolute; display:none">
    <div class="rc-pannel rc-pagepadding layui-form" style="border:1px solid var(--primary-color);box-shadow:2px 2px 5px var(--primary-color);width:280px">
        <div class="rc-pannel-body">

            <div class="layui-form-item">
                <label class="layui-form-label">快速选择</label>
                <div class="layui-input-block">
                    <select lay-filter="regextype" id="regextype">
                        <option value="-1">不验证</option>
                        <?php
                        foreach ($regex_arr as $key => $regex) {
                        ?>
                            <option value='<?php echo $key ?>'><?php echo $regex ?></option>
                        <?php
                        }
                        ?>
                        <option value="">自定义</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">请输入正则</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" id="regxval" />
                </div>
            </div>



        </div>

        <div class="rc-pannel-footer">
            <div style="text-align: center; padding-top:15px">
                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" id="sureregex">确定</button>
                <button type="button" id="closeselregex" class="layui-btn layui-btn-sm">关闭</button>
            </div>
        </div>
    </div>
</div>


<script src="/static/admin/lib/Sortable/Sortable.min.js"></script>

<script>
    layui.use(function() {
        var form = layui.form;
        var layer = layui.layer;


        // 解决Sortable.create在火狐浏览器上会打开新窗口
        document.body.ondrop = function(event) {
            event.preventDefault();
            event.stopPropagation();
        }

        $('#add').click(function() {

            var maxidx = $('#maxidx').val();
            $('tbody').append(`
                 <tr>
                    <td><input type="text" class="layui-input" style="width: 60px;" name="field[` + maxidx + `][title]" lay-verify="required" /></td>
                    <td><input type="text" class="layui-input" style="width: 60px;" name="field[` + maxidx + `][name]" /></td>
                    <td>
                        <div class="layui-input-inline" style="width: 100px;">
                            <select name="field[` + maxidx + `][type]">
                                <option value="string">字符串</option>
                                <option value="text">文本</option>
                                <option value="integer">整数</option>
                                <option value="decimal">小数</option>
                                <option value="datetime">时间</option>
                            </select>
                        </div>
                    </td>
                    <td>
                       
                        <div class=" rc-flex rc-flex-vertical-center " >
                            <a class="selectelement primary">选择元素控件</a>
                            <input type="hidden" name="field[` + maxidx + `][element]" class="element" />
                            <input type="hidden" name="field[` + maxidx + `][sourceval]" class="sourceval" />
                            <input type="hidden" name="field[` + maxidx + `][polymorphic]" class="polymorphic" />
                             <input type="hidden" name="field[` + maxidx + `][sourcetype]" class="sourcetype" />
                        </div>

                    </td>
                     <td><input type="checkbox" name="field[` + maxidx + `][editor]" value="1" checked /></td>
                    <td><input type="checkbox" name="field[` + maxidx + `][require]" value="1" checked /></td>
                    <td>
                        <a class="selectregex primary">
                            不验证
                        </a>
                        <input type="hidden" class="regname" value="" />
                        <input type="hidden" name="field[` + maxidx + `][reg]" class="regvalue" value="" />
                    </td>

                     <td>

                        <select name="field[` + maxidx + `][search]">
                            <option value="0">不搜索</option>
                            <option value="1">完全匹配</option>
                            <option value="2">模糊匹配</option>
                            <option value="3">json搜索</option>
                        </select>
                    </td>
                    <td>
                        <select name="field[` + maxidx + `][group]">
                            <option value="1">主操作区</option>
                            <option value="2">副操作区</option>
                        </select>
                    </td>
                    <td><input type="text" class="layui-input" style="width: 100px;" name="field[` + maxidx + `][default]" /></td>
                   
                    <td>
                        <input type="hidden" class="optype" value="add" name="field[` + maxidx + `][op]" />
                        <a href="javascript:;" title="拖拽排序" class="drap" style="margin-right: 20px;cursor:move"> <i class="iconfont" style="font-size: 18px;">&#xe638;</i></a>
                        <a href="javascript:;" title="删除" class="delete"> <i class="iconfont" style="font-size: 18px;color:#970c0c">&#xe786;</i></a>



                    </td>
                </tr>
         `);
            $('#maxidx').val(parseInt(maxidx) + 1);
            form.render();
        });


        //删除
        $('body').on('click', '.delete', function() {
            var trcount = $('tbody').find('tr').length;
            if (trcount == 1) {
                toastr_error('必须保留一个');
                return;
            }
            var op = $(this).parent().find('.optype').val();
            switch (op) {
                case 'add':
                    $(this).parent().parent().remove();
                    break;
                case 'edit':
                    $(this).parent().find('.optype').val('delete');
                    $(this).parent().parent().hide();
                    break;
            }

        });


        var sortable = new Sortable(document.querySelector('#sort tbody'), {
            animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
            dragClass: "sortable-drag", // 正在被拖拽中的css类名
            handle: '.drap', // handle's class
            // 列表单元拖放结束后的回调函数
            onEnd: function( /**Event*/ evt) {
                //可以写自己业务，其他的方法和参数参考文档：http://www.sortablejs.com/options.html 
                console.log(evt);
            },
        });


        /**** 选择元素开始***** */
        //当前选中的元素
        var thisselectelement;
        $("body").on("click", '.selectelement', function() {
            // $('.selectelement').click(function() {
            thisselectelement = $(this);
            $('#selelementbox').show();
            $('#selelementbox').css('top', $(this).offset().top + 20 + 'px');
            $('#selelementbox').css('left', $(this).offset().left + 'px');

        });

        $('#chooseelement').click(function() {

            var elementchoose = $('#elementchoose').val(); //元素ID
            var elementchoose_ident = $('#elementchoose_ident').val(); //元素name
            var elementchoose_source = $('#elementchoose_source').val(); //选择的数据源ID
            var elementchoose_sourcetype = $('#elementchoose_sourcetype').val(); //选择的数据源TYPE
            var elementchoose_title = $('#elementchoose_title').val(); //选择的元素名
            var elementchoose_source_title = $('#elementchoose_source_title').val(); //选择的数据源名
            var elementchoose_polymorphic = $('#elementchoose_polymorphic').val(); //元素多态

            var polymorphic = $('#elementchoose_polymorphic').val(); //元素多态
            //判断数据源是否选择
            if ($('#sourcediv').is(':visible')) {

                if (elementchoose_source == 0) {
                    toastr_error('请选择数据源');
                    return;
                }
            }
            if (elementchoose_source == 0) {
                thisselectelement.html(elementchoose_title);
            } else {
                thisselectelement.html(elementchoose_title + " | " + elementchoose_source_title);
            }

            thisselectelement.parent().find('.element').val(elementchoose_ident); //设置元素
            thisselectelement.parent().find('.sourcetype').val(elementchoose_sourcetype); //设置数据源
            thisselectelement.parent().find('.sourceval').val(elementchoose_source); //设置数据源
            thisselectelement.parent().find('.polymorphic').val(elementchoose_polymorphic); //设置元素
            $('#selelementbox').hide();

        });

        $('#closeelementchoose').click(function() {
            $('#selelementbox').hide();
        });

        /**** 选择元素结束***** */


        /*******正则验证选择******* */
        var thisselectregex; //当前选择正则对象
        $("body").on("click", '.selectregex', function() {
            thisselectregex = $(this);
            $('#selregexbox').show();
            $('#selregexbox').css('top', $(this).offset().top + 20 + 'px');
            $('#selregexbox').css('left', $(this).offset().left + 'px');

            var regval = thisselectregex.parent().find('.regvalue').val();
            $('#regextype').val(regval);
            $('#regxval').val(regval);

            form.render();
        });

        $('#closeselregex').click(function() {
            $('#selregexbox').hide();
        });

        form.on('select(regextype)', function(data) {
            var elem = data.elem; // 获得 select 原始 DOM 对象
            var value = data.value; // 获得被选中的值
            var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象
            if (value == -1) {
                value = '';
            }
            $('#regxval').val(value);

        });

        //确定选择
        $('#sureregex').click(function() {

            var regtext = $('#regextype').find("option:selected").text();
            thisselectregex.parent().find('.regname').val(regtext); //正则名
            thisselectregex.parent().find('.regvalue').val($('#regxval').val()); //具体正则值


            thisselectregex.html(regtext);
            $('#selregexbox').hide();
        });

        /*******正则验证选择结束******* */

        form.on('submit(save)', function(data) {


            $.ajax({
                url: '/app/cms/admin/Model/fieldmanage?modelid=<?php echo request()->get('modelid'); ?>', //请求路径
                type: "POST", //请求方式
                data: data.field, // 默认写法
                success: function(data) {
                    if (data.code == 0) {
                        toastr_success("设置成功", function() {
                            parent.location.reload();
                        });
                    } else {
                        toastr_error(data.message);
                    }
                },
                error: function() {

                },

            });
        });
    });
</script>